// 高级版的todolist
import React from "react"

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      input: "",
      list: [ { date: '2021-04-04 16:37', text: "今天我要写一个很厉害的东西" } ]
    }
  }

  changeInput = ({ target }) => {
    this.setState({
      input: target.value
    })
  }

  pushList = () => {
    let list = [...this.state.list, { date: new Date().toLocaleString(), text: this.state.input }]
    this.setState({
      list
    })
  }

  search = () => {
    // 模糊搜索
    const d = this.state.list.filter((item) => item.text.includes(this.state.input))
      alert(d[0].text)    
  }

  render() { 
    return <>
      {/* 输入的头部 */}
      <div>
        <input onChange={this.changeInput}
          value={this.state.input}
          type="text" />
        <button onClick={this.pushList}>提交</button>
      {/* 搜索 */}
      <button
          onClick={ this.search }
        >搜索</button>
      </div>
      
      {/* 展示 */}
      <ul>
        {
          this.state.list.map(({date, text}) => {
            return <li key={date}>
              {date}:{text}
            </li>
          })
        }
      </ul>
    </>
  }
}
export default App